<template>
  <div class="Alphabet">
    <ul>
     <li v-for="(citie,key) in cities" :key="key" @click="emitKey">{{key}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name:'CityAlphabet',
    props:{
      cities:{
          type:Object,
          default:{}
      }
  },
  methods: {
    emitKey(e){
      console.log(e.target.innerHTML)
      // console.log(e)
      this.$emit('acceptKey',e.target.innerHTML)
    }
  },


  }
</script>
<style lang='stylus' scoped>
@import '~stylus/varibles.styl';
.Alphabet
  position absolute
  // top 0
  right 0
  height 89%
  ul
   height 100%
   display flex
   flex-direction column
   justify-content center
   li
    text-align center
    width 14px
    height 16px
    color $bgColor
    margin-right 4px
    
   
</style>